<template>
	<view class="content">

		<view class="canvas">
			<!-- 二维码插件 width height设置宽高 -->
			<canvas canvas-id="qrcode" :style="{width: `${uqrCodeSize}px`, height: `${uqrCodeSize}px`}" />
		</view>

	</view>
</template>

<script>
	import Vue from 'vue';
	import uQRCode from './uqrcode.js'

	export default {
    props: {
      uqrCodeText: {
        type: String,
        default: ''
      },
      uqrCodeSize: {
        type: Number,
        default: 200
      },
    },
		data() {
			return {
				// 最终生成的二维码图片
				qrcodeSrc: '',

			}
		},
    // 在实例挂载完成后被立即调用
    mounted() { //兼容非动态取值(二维码为固定内容)
      this.make()
      // console.log('二维码内容', this.uqrCodeText)
    },
		methods: {
			make() {
        console.log('二维码内容', this.uqrCodeText)
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.uqrCodeText,
					size: this.uqrCodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},


		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.canvas {
		margin-top: 50rpx;
		margin-bottom: 36rpx;
		text-align: center;
	}

</style>